<template>
  <div class="upload-box">
    <el-upload
      v-bind="$attrs"
      v-on="$listeners"
      class="upload-demo"
      :class="{ buttonDisabled: disabled }"
      :httpRequest="uploadFile"
      action="/"
      multiple
      :file-list="files"
      :before-remove="beforeRemove"
      :before-upload="breforeUpload"
      :on-remove="removeFile"
      :on-preview="getFile"
      :disabled="disabled"
      :accept="acceptValue"
      ref="elupload"
      list-type="picture-card"
    >
      <el-button size="small" type="primary" :loading="loading">{{
        loading ? "上传中" : "点击上传"
      }}</el-button>
    </el-upload>
  </div>
</template>

<script>
import { fileUploadFile, wechatWorkUpload } from "@/api";
import { fileTypeValidate, acceptValue } from "@/utils/fileTypeValidation";
export default {
  name: "FormWechatFileList",
  props: {
    value: {
      type: Array | undefined,
      default: () => {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      acceptValue,
      msg: "",
      loading: false,
      failed: false
    };
  },
  created() {
    if (!this.value) {
      this.$emit("input", []);
    }
  },
  computed: {
    files: {
      get() {
        return this.value.map(item => {
          return {
            name: item.originalName,
            url: item.mappingPath,
            ...item
          };
        });
      },
      set(e) {
        this.$emit("input", e);
      }
    },
    tips() {
      if (!this.value) {
        return true;
      }
      return false;
    }
  },
  methods: {
    showTips(e) {
      e.preventDefault();
      //
    },
    getFile(e) {
      window.open(e.url);
    },
    async uploadFile(e) {
      this.files = [...this.files];
      const type = fileTypeValidate(e.file.name);
      this.loading = true;
      const formData = new FormData();
      formData.append("file", e.file);
      formData.append("type", type);
      const wechatFormData = new FormData();
      wechatFormData.append("multipartFile", e.file);
      try {
        const res = await fileUploadFile(formData);
        const wechatRes = await wechatWorkUpload(wechatFormData);
        res.data.media_id = wechatRes.data.media_id;
        this.files.push(res.data);
      } catch (error) {
        this.$refs.elupload.tempIndex -= 1;
      }
      this.files = [...this.files];
      this.loading = false;
    },
    breforeUpload(file) {
      const type = fileTypeValidate(file.name);
      if (!type || (this.type && type !== this.type)) {
        this.failed = true;
        this.$$notified.error({
          message: "上传失败，不支持的文件类型"
        });
      }
      return Boolean(type);
    },
    beforeRemove(file, fileList) {
      if (this.failed) {
        this.failed = false;
        return;
      }
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    removeFile(e) {
      this.files = this.files.filter(i => {
        return i.id != e.id;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.buttonDisabled {
  &::v-deep {
    & > div {
      display: none;
    }
  }
}

.upload-box {
  width: 100%;
  height: 100%;
}
</style>
